<template>
  <div class="op-dialog">
    <el-dialog
      v-model="visible"
      center
      :close-on-click-modal="false"
      :title="title"
      width="800"
    >
      <template #default>
        <el-form ref="formRef" label-width="100" :model="model" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="model.name" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="标识" prop="label">
                <el-input v-model="model.label" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="model.remark" type="textarea" rows="3" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="功能权限">
                <MenuCheck v-model="model.menuIdList" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template #footer>
        <el-space>
          <el-button type="default" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </el-space>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import MenuCheck from "@/components/menu-check/index.vue";
import { addRole, updateRole } from "@/api/system";

export default {
  name: "OpDialog",

  components: {
    MenuCheck,
  },

  emits: ["success"],

  data() {
    return {
      visible: false,
      title: "新增",

      id: null, // 当前操作的数据Id
      // 表单数据
      model: {
        name: "", // 名称
        label: "", // 标识
        remark: "", // 备注
        menuIdList: [], // 功能权限
      },
      // 表单校验规则
      rules: {
        name: [{ required: true, message: "请输入" }],
        label: [{ required: true, message: "请输入" }],
      },
    };
  },

  methods: {
    // open
    open(row) {
      // 1. 判断 row 是否有值,来处理不同的逻辑
      if (row) {
        // 编辑
        this.title = "编辑";
        this.id = row.id;

        // 回填数据
        this.model.name = row.name;
        this.model.label = row.label;
        this.model.remark = row.remark;
        this.model.menuIdList = row.menuIdList || [];

        this.visible = true;
      } else {
        // 新增
        this.title = "新增";
        this.id = null;

        // 回填数据
        this.model.name = "";
        this.model.label = "";
        this.model.remark = "";
        this.model.menuIdList = [];

        this.visible = true;
      }

      // // 1. 打开弹窗
      // this.visible = true;
      // console.log("row", row);
    },

    // 取消
    handleCancel() {
      this.visible = false;
    },

    // 确定
    handleConfirm() {
      // 1. 表单校验
      this.$refs.formRef.validate(async (flag) => {
        if (!flag) return;

        // 2. 校验通过 调用接口
        if (this.id) {
          // 编辑
          await updateRole({ ...this.model, id: this.id });
        } else {
          // 新增
          await addRole(this.model);
        }

        // 3. 关闭弹窗
        this.visible = false;

        // 4. 触发一个成功的自定义事件
        this.$emit("success");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.op-dialog {
  :deep(.el-dialog__footer) {
    text-align: right;
  }
}
</style>
